<template>
  <div class="app-container">
    <el-row :gutter="20">
      <splitpanes
        :horizontal="this.$store.getters.device === 'mobile'"
        class="default-theme"
      >
        <!--部门数据-->
        <pane size="20">
          <el-col>
            <div class="head-container">
              <el-input
                v-model="fileName"
                placeholder="请输入名称"
                clearable
                size="small"
                prefix-icon="el-icon-search"
                style="margin-bottom: 20px"
              />
            </div>
            <div class="head-container">
              <el-tree
                :data="fileOptions"
                :props="defaultProps"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                ref="tree"
                node-key="id"
                default-expand-all
                highlight-current
                @node-click="handleNodeClick"
              >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span class="custom-tree-node-label"
                    ><i class="el-icon-folder-opened"></i>{{ node.label }}</span
                  >
                  <el-popover
                    placement="right-start"
                    width="50"
                    :offset="20"
                    popper-class="treePopover"
                    :visible-arrow="false"
                    trigger="hover"
                  >
                    <p
                      v-if="rootParentId !== data.id"
                      @click="() => edit(node, data)"
                    >
                      编辑
                    </p>
                    <p @click="() => append(node, data)">新增文件夹</p>
                    <p
                      v-if="rootParentId !== data.id"
                      @click="() => remove(node, data)"
                    >
                      删除
                    </p>
                    <i class="treeBtn el-icon-more" slot="reference"></i>
                  </el-popover>
                </span>
              </el-tree>
            </div>
          </el-col>
        </pane>
        <!--文档数据-->
        <pane size="80">
          <el-col>
            <el-form
              :model="queryParams"
              ref="queryForm"
              size="small"
              :inline="true"
              v-show="showSearch"
              label-width="68px"
            >
              <el-form-item label="文档名称" prop="name">
                <el-input
                  v-model="queryParams.name"
                  placeholder="请输入文档名称"
                  clearable
                  style="width: 240px"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="文档类型" prop="fileType">
                <el-select
                  v-model="queryParams.fileType"
                  placeholder="文档类型"
                  clearable
                  style="width: 240px"
                >
                  <el-option
                    v-for="dict in dict.type.knowledge_file_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="状态" prop="ragSync">
                <el-select
                  v-model="queryParams.ragSync"
                  placeholder="文档状态"
                  clearable
                  style="width: 240px"
                >
                  <el-option
                    v-for="dict in dict.type.knowledge_sync_status"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="创建时间">
                <el-date-picker
                  v-model="dateRange"
                  style="width: 240px"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  size="mini"
                  @click="handleQuery"
                  >搜索</el-button
                >
                <el-button
                  icon="el-icon-refresh"
                  size="mini"
                  @click="resetQuery"
                  >重置</el-button
                >
              </el-form-item>
            </el-form>

            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5" v-if="upload.data.baseFileId">
                <el-button
                  type="primary"
                  plain
                  icon="el-icon-plus"
                  size="mini"
                  @click="handleImport"
                  >添加文档</el-button
                >
                <!-- v-hasPermi="['knowledge:file:upload']" -->
              </el-col>

              <right-toolbar
                :showSearch.sync="showSearch"
                :mode="true"
                :isTable.sync="isTable"
                @queryTable="getList"
              ></right-toolbar>
            </el-row>
            <el-empty
              v-if="fileList.length === 0"
              description="暂无文档"
            ></el-empty>
            <div v-else>
              <el-table v-if="isTable" v-loading="loading" :data="fileList">
                <!-- <el-table-column label="文件名称" align="center" prop="name" /> -->
                <el-table-column prop="name" label="文件名称">
                  <template slot-scope="scope">
                    <el-tooltip :content="scope.row.name" placement="top">
                      <div class="ellipsis">{{ scope.row.name }}</div>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <!-- [0:文件目录 1:文件 ] -->
                <el-table-column prop="fileType" label="文件类型" width="100">
                  <template slot-scope="scope">
                    <dict-tag
                      :options="dict.type.knowledge_file_type"
                      :value="scope.row.fileType"
                    />
                  </template>
                </el-table-column>
                <!-- 状态 -->
                <el-table-column prop="ragSync" label="状态" width="100">
                  <template slot-scope="scope">
                    <span :style="{ color: corlorList[scope.row.ragSync] }">
                      {{
                        getLabelfromValue(
                          dict.type.knowledge_sync_status,
                          scope.row.ragSync
                        )
                      }}
                    </span>
                    <span v-if="scope.row.ragSync === 3">
                      <el-popover
                        placement="top-start"
                        width="200"
                        trigger="hover"
                        :content="scope.row.message"
                      >
                        <i class="el-icon-warning-outline" slot="reference"></i>
                      </el-popover>
                    </span>
                  </template>
                </el-table-column>

                <el-table-column
                  label="创建时间"
                  align="center"
                  prop="createTime"
                  width="160"
                >
                  <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime) }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  class-name="small-padding fixed-width"
                >
                  <template slot-scope="scope" v-if="scope.row.userId !== 1">
                    <!-- icon="el-icon-view" -->
                    <el-link @click="handlePreview(scope.row)"
                      ><i class="iconfont icon-a-qietu327"></i>预览</el-link
                    >
                    <!-- v-hasPermi="['knowledge:file:view']" -->
                    <el-link
                      icon="el-icon-download"
                      @click="handleDownload(scope.row)"
                      >下载</el-link
                    >
                    <!-- v-hasPermi="['knowledge:file:download']" -->
                    <el-link
                      icon="el-icon-delete"
                      @click="handleDelete(scope.row)"
                      >删除</el-link
                    >
                    <!-- v-hasPermi="['knowledge:file:remove']" -->
                    <el-link
                      icon="el-icon-refresh"
                      @click="handleSync(scope.row)"
                      >同步</el-link
                    >
                    <!-- v-hasPermi="['knowledge:file:sync']" -->
                  </template>
                </el-table-column>
              </el-table>
              <el-row
                v-else
                v-loading="loading"
                class="knowledgeBaseContent"
                :gutter="10"
              >
                <el-col
                  v-for="item in fileList"
                  :key="item.key"
                  :xs="12"
                  :sm="12"
                  :md="8"
                  :lg="8"
                  :xl="8"
                  class="knowledgeBaseItem"
                >
                  <div class="view-content">
                    <el-descriptions :title="item.name" :column="1">
                      <template #title>
                        <svg-icon icon-class="newFile" />
                        <!-- <i class="iconI el-icon-document"></i> -->
                        <span :title="item.name">{{ item.name }}</span>
                      </template>
                      <el-descriptions-item label="同步状态">
                        <span :style="{ color: corlorList[item.ragSync] }">
                          <!-- {{
                            dict.type.knowledge_sync_status[item.ragSync].label
                          }} -->
                          {{
                            getLabelfromValue(
                              dict.type.knowledge_sync_status,
                              item.ragSync
                            )
                          }}
                        </span>
                      </el-descriptions-item>
                      <el-descriptions-item label="文件类型">
                        <!-- {{
                        dict.type.knowledge_file_type[item.fileType].label
                      }} -->
                        {{
                          getLabelfromValue(
                            dict.type.knowledge_file_type,
                            item.fileType
                          )
                        }}
                      </el-descriptions-item>
                      <el-descriptions-item label="创建时间">{{
                        item.createTime
                      }}</el-descriptions-item>
                    </el-descriptions>
                    <div class="knowledgeBaseItem-bottom">
                      <!-- icon="el-icon-view" -->
                      <el-link @click="handlePreview(item)"
                        ><i class="iconfont icon-a-qietu327"></i>预览</el-link
                      >
                      <!-- v-hasPermi="['knowledge:file:view']" -->
                      <el-link
                        icon="el-icon-download"
                        @click="handleDownload(item)"
                        >下载</el-link
                      >
                      <!-- v-hasPermi="['knowledge:file:download']" -->
                      <el-link icon="el-icon-delete" @click="handleDelete(item)"
                        >删除</el-link
                      >
                      <!-- v-hasPermi="['knowledge:file:remove']" -->
                      <el-link icon="el-icon-refresh" @click="handleSync(item)"
                        >同步</el-link
                      >
                      <!-- v-hasPermi="['knowledge:file:sync']" -->
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>

            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </el-col>
        </pane>
      </splitpanes>
    </el-row>

    <!-- 添加或修改树对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form
        @submit.native.prevent
        ref="form"
        :model="form"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="文件夹名称" prop="fileName">
          <el-input v-model="form.fileName" placeholder="文件夹名称" />
        </el-form-item>
      </el-form>
      <div class="dirDialogInfo">
        <div class="dirDialogInfoTitle">
          <i class="el-icon-warning"></i>命名规则
        </div>
        <p>1、文件夹名称不能包含以下字符：&lt;&gt; \" ' \ |</p>
        <p>2、文件夹名称长度不能超过20个字符</p>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="submitForm"
          @keyup.enter.native="submitForm"
          >确 定</el-button
        >
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 文件导入对话框 -->
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="400px"
      append-to-body
    >
      <el-upload
        ref="upload"
        :limit="10"
        multiple
       
        :headers="upload.headers"
        :data="upload.data"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <!-- <div class="el-upload__tip" slot="tip">
            <el-checkbox
              v-model="upload.updateSupport"
            />是否更新已经存在的文件数据
          </div> -->
          <span>仅允许导入doc、docx、pdf格式文件。</span>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  fileTreeSelect,
  listFile,
  addDir,
  updateDir,
  syncFile,
  delDir,
  delFile,
} from "@/api/knowledge/file";
import { getLabel } from "@/utils/index";
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
let treeData = null;
export default {
  name: "File",
  dicts: ["knowledge_sync_status", "knowledge_file_type"],
  components: { Treeselect, Splitpanes, Pane },
  data() {
    return {
      corlorList: ["#FA5151", "#54BEC0", "#4E8DF6", "#ff4949"],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      isTable: true,
      // 总条数
      total: 0,
      // 知识库文档表格数据
      fileList: [],
      // 弹出层标题
      title: "",
      // 所有树选项
      fileOptions: undefined,
      rootParentId: null,
      // 过滤掉已禁用树选项
      enabledFileOptions: undefined,
      // 是否显示弹出层
      open: false,
      // 部门名称 ???
      fileName: undefined,
      // 日期范围
      dateRange: [],
      // 表单参数
      form: {},
      defaultProps: {
        children: "children",
        label: "label",
      },
      // 文件导入参数
      upload: {
        // 是否显示弹出层（文件导入）
        open: false,
        // 弹出层标题（文件导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的文件数据
        updateSupport: 0,
        data: {
          baseId: "",
          baseFileId: "",
        },
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/knowledge/file/upload",
      },
      // 查询参数
      queryParams: {
        baseId: 1,
        parentId: 1,
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        fileType: undefined,
        ragSync: undefined,
      },
      // 表单校验
      rules: {
        fileName: [
          { required: true, message: "文件夹名称不能为空", trigger: "blur" },
          {
            min: 1,
            max: 20,
            message: "文件夹名称长度必须介于 1 和 20 之间",
            trigger: "blur",
          },
          {
            pattern: /^[^<>"'|\\]+$/,
            message: "不能包含非法字符：< > \" '  |",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    // 根据名称筛选树
    fileName(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    const baseId = this.$route.params && this.$route.params.baseId;
    this.upload.data.baseId = baseId;
    if (baseId !== undefined && baseId != 0) {
      this.queryParams.baseId = baseId;
      fileTreeSelect(baseId).then((response) => {
        this.fileOptions = response.data;
        this.rootParentId = response.data[0].id;
        if (response.data[0] && response.data[0].hasOwnProperty("children")) {
          this.queryParams.parentId = response.data[0].children[0].id;

          this.upload.data.baseFileId = this.queryParams.parentId;
          this.getList(this.queryParams.parentId);
          this.$nextTick(() => {
            this.$refs.tree.setCurrentKey(this.queryParams.parentId);
          });
        } else {
          this.$nextTick(() => {
            this.$refs.tree.setCurrentKey(this.rootParentId);
          });
        }
      });
    }
  },
  methods: {
    // 字典显示的方法
    getLabelfromValue(dict, value) {
      return getLabel(dict, value);
    },
    /** 查询文件列表 */
    getList() {
      this.loading = true;
      listFile(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          this.fileList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },

    // 过滤禁用的文件夹
    // filterDisabledFile(fileList) {
    //   return fileList.filter((file) => {
    //     if (file.disabled) {
    //       return false;
    //     }
    //     if (file.children && file.children.length) {
    //       file.children = this.filterDisabledFile(file.children);
    //     }
    //     return true;
    //   });
    // },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      if (this.rootParentId === data.id) {
        this.upload.data.baseFileId = "";
        this.queryParams.parentId = "";
        this.fileList = [];
        this.total = 0;
      } else {
        this.upload.data.baseFileId = data.id;
        this.queryParams.parentId = data.id;
        this.handleQuery();
      }
    },
    // 表单重置
    reset(data, type) {
      if (type) {
        // 编辑
        this.form = {
          baseId: this.upload.data.baseId,
          baseFileId: data.id,
          fileName: data.label,
          type,
        };
      } else {
        //新增
        this.form = {
          baseFileId: data.id,
          fileName: null,
          baseId: this.upload.data.baseId,
        };
      }
      this.resetForm("form");
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.form.fileName = null;
    },

    // 添加节点
    append(node, data) {
      treeData = data;
      this.open = true;
      this.title = "新增文件夹";
      this.reset(node.data);
    },
    // // 编辑节点
    edit(node, data) {
      treeData = data;
      this.reset(node.data, "edit");
      this.open = true;
      this.title = "编辑文件夹";
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.type) {
            delete this.form.type;
            updateDir(this.form).then((response) => {
              this.open = false;
              treeData.label = this.form.fileName;
            });
          } else {
            addDir(this.form).then((response) => {
              this.open = false;
              const newChild = {
                id: response.id,
                label: this.form.fileName,
                children: [],
              };
              if (!treeData.children) {
                this.$set(treeData, "children", []);
              }
              treeData.children.push(newChild);
            });
          }
        }
      });
    },
    // 删除节点
    remove(node, data) {
      const ids = data.id || this.ids;
      this.$modal
        .confirm("是否确认删除所选文件夹？")
        .then(function () {
          return delDir(ids);
        })
        .then((res) => {
          // this.$modal.msgSuccess("删除成功");
          const parent = node.parent;
          const children = parent.data.children || parent.data;
          const index = children.findIndex((d) => d.id === data.id);
          children.splice(index, 1);
        })
        .catch(() => {});
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      // this.queryParams.id = undefined;
      this.$refs.tree.setCurrentKey(null);
      this.handleQuery();
    },
    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case "knowledge:file:Export":
          this.handleExport(row); // 导出功能，暂时不做
          break;
        default:
          break;
      }
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      const param = {
        id: ids,
        fileId: row.fileId,
      };
      this.$modal
        .confirm('是否确认删除知识库文档名称为"' + row.name + '"的文件？')
        .then(function () {
          return delFile(param);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 同步按钮操作 */
    handleSync(row) {
      const that = this;
      this.$modal.confirm("是否确认同步文档？").then(function () {
        const param = {
          id: row.id,
        };
        syncFile(param).then((res) => {
          if(res?.code === 200){
            that.$modal.msgSuccess(res?.msg);
            that.getList();
          }else{
            that.$modal.msgError(res?.msg);
          }
          // if (res.indexOf("成功") > -1) {
          //   that.$modal.msgSuccess(res);
          //   that.getList();
          // } else {
          //   that.$modal.msgError(res);
          // }
        });
      });
    },
    /** 预览按钮操作 */
    handlePreview(row) {
      this.$router.push({
        name: "FileView",
        params: {
          ...row,
          ...this.upload.data,
          ...{ fileName: row.name },
        },
      });
    },
    /** 导出按钮操作 暂时不做 */
    handleExport() {},
    /** 下载按钮操作 */ // 参数？？？
    handleDownload(item) {
      this.download(
        "knowledge/file/download",
        {
          ...this.upload.data,
          ...{ fileName: item.name },
        },
        item.name,
      );
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "添加文档";
      this.upload.open = true;
      this.$refs &&
        this.$refs.upload &&
        this.$refs.upload.clearFiles &&
        this.$refs.upload.clearFiles();
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      // this.$refs.upload.clearFiles();
      // console.log('response',response, file, fileList)
      if(response?.code === 200){
        this.$modal.msgSuccess(response?.msg);
      }else{
        this.$modal.msgError(response?.msg)
      }
      this.getList();

      // if (
      //   typeof response !== "string" ||
      //   response.indexOf("文件上传成功") === -1
      // ) {
      //   const msg = response.msg ? response.msg : response;
      //   this.$modal.msgSuccess(msg);
      //   this.getList();
      //   // this.$alert(
      //   //   "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
      //   //     msg +
      //   //     "</div>",
      //   //   "导入结果",
      //   //   { dangerouslyUseHTMLString: true }
      //   // );
      //   return;
      // }
      // this.$modal.msgSuccess("上传成功");
      // // this.$alert(
      // //   "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
      // //     "上传成功" +
      // //     "</div>",
      // //   "导入结果",
      // //   { dangerouslyUseHTMLString: true }
      // // );
      // this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
      // this.$refs.upload.clearFiles();
    },
  },
};
</script>
<style scoped lang="scss">
.el-row.knowledgeBaseContent {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
  .knowledgeBaseItem {
    border-radius: 4px;
    margin-bottom: 10px;

    .view-content {
      border-radius: 12px;
      min-height: 36px;
      // background: #f6f7ff;
      border: 1px solid #e5e5e5;
      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
      padding: 10px;
      padding-bottom: 0;
    }
  }
}

.knowledgeBaseItem-bottom {
  padding: 8px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.el-link.el-link--default {
  margin-left: 4px;
}

.custom-tree-node {
  position: relative;
  width: 100%;

  span:last-child {
    position: absolute;
    right: 0;
    top: -2px;
  }

  .treeBtn {
    border: none;
    transform: rotate(90deg);
    padding: 7px;
    font-size: 14px;
    font-weight: 400;
  }
  .custom-tree-node-label {
    font-size: 14px;
  }
}

.dirDialogInfo {
  background: #e8f4ff;
  border: none;
  padding: 20px;
  padding-bottom: 10px;
  margin-top: 10px;

  .dirDialogInfoTitle {
    i {
      color: #e6a23c;
      margin-right: 8px;
    }
  }

  p {
    padding: 0;
    margin: 0;
    padding-bottom: 10px;
    margin-left: 20px;
  }
}
</style>
<style lang="scss">
.treePopover.el-popover {
  min-width: 100px !important;
}

.treePopover.el-popover[x-placement^="right"] {
  margin-left: -6px;
  padding: 0;
  width: 100px !important;

  p {
    margin: 10px;
    cursor: pointer;
  }
}

.view-content {
  font-size: 16px;
  color: #0e0e0e;
  line-height: 22px;
  .el-descriptions__header {
    padding-bottom: 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid #f1f1f1;
    padding-left: 10px;
  }
  .el-descriptions__body {
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 10px;
    .el-descriptions-row {
      .el-descriptions-item__cell {
        padding-bottom: 4px;
      }
    }
  }
  .el-descriptions__title {
    font-size: 16px;
    color: #0e0e0e;
    line-height: 22px;
    font-weight: 400;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
    .svg-icon {
      margin-right: 4px;
    }
  }
}
</style>
